<template>
	<view class="changelist">
		<!-- 切换城市列表 -->
		<scroll-view 
		scroll-y="true" 
		class="sc" 
		:show-scrollbar="false"
		:scroll-into-view="cityid">
			<view class="sc-box">
				<view class="title-box">
					<view class="title">
						<icon class="iconfont icon-dingwei"></icon>
						当前城市
					</view>
					<view class="current-city">
						{{t_city}}
					</view>
				</view>
				<view class="hot-city-box">
					<view class="title" >
						<icon class="iconfont icon-hot-fill"></icon>
						热门城市
					</view>
					<view class="hot-city-list">
						<view 
						class="item" 
						v-for="(item,index) in list" 
						@click="changecity(item)"
						:key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="city-box" v-for="(item,index) in city" :key="item.initial">
					<view class="initial" :id="item.initial">
						{{item.initial}}
					</view>
					<view class="city-name" @click="changecity(itemname.name)" v-for="(itemname,index) in item.list" :key="itemname.name">
						{{itemname.name}}
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "ChangeList",
		data() {
			return {
				list: ['深圳', '北京', '上海', '成都', '广州', '重庆', '西安', '苏州', '武汉', '杭州', '郑州', '南京'],
				cityid: '',
				event: '',
				t_city: "北京",
			};
		},
		props: {
			city: {
				type: Array,
			}
		},
		methods: {
			getCityId() {
				this.$bus.$on('clickchar',(res) => {
					this.cityid = res;
				})
			},
			getCityName() {
				let city_name = uni.getStorageSync('city');
				this.t_city = city_name == '' ? '北京' : uni.getStorageSync('city');
			},
			//改变城市定位
			changecity(city) {
				uni.setStorageSync('city',city);
				this.$emit('changeCity');
				this.t_city = city;
				uni.navigateBack();
			}
		},
		mounted() {
			this.getCityId();
			this.getCityName();
		}
	}
</script>

<style lang="scss">
	.changelist {
		width: 100%;
		height: calc(100% - 110px);
		background-color: #000000;
		color: #FFFFFF;
		.sc {
			height: 100%;
			.sc-box {
				.title-box,
				.hot-city-box {
					padding: 0 15px 20px;
					background-color: #222222;
					font-size: 16px;
				}
				
				.title-box {
					.title {
						height: 50px;
						line-height: 50px;
				
						.iconfont {
							color: #00ffff;
						}
					}
				
					.current-city {
						height: 30px;
						line-height: 30px;
						color: #AAAAAA;
						font-size: 14px;
					}
				}
				
				.hot-city-box {
					margin-top: 10px;
				
					.title {
						height: 50px;
						line-height: 50px;
				
						.iconfont {
							font-size: 20px;
							color: #ff2a95;
						}
					}
				
					.hot-city-list {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 0 10px;
				
						.item {
							flex: 0 0 32.5%;
							height: 30px;
							line-height: 30px;
							color: #AAAAAA;
							background-color: #333333;
							border-radius: 5px;
							text-align: center;
							margin-bottom: 5px;
						}
					}
				}
				
				.city-box {
					margin-top: 10px;
				
					.initial {
						padding: 0 15px;
						color: #666666;
						font-weight: 600;
						font-size: 13px;
						height: 25px;
						line-height: 25px;
					}
				
					.city-name {
						padding: 0 15px;
						background-color: #333333;
						color: #AAAAAA;
						line-height: 50px;
						font-size: 16px;
						padding-left: 10px;
					}
				}
				
			}
		}
	}
</style>
